<template>
    <DialogVue :data="data.information" @close="onClose">
        <template #content>
            <h1 class="t">基本信息</h1>
            <div class="dialog-box">
                <el-form
                    ref="ruleFormRef"
                    :inline="true"
                    :model="data.information"
                    :rules="data.rules"
                    label-width="120px"
                    style="width: 100%; display: flex; flex-wrap: wrap"
                >
                    <!-- <el-form-item label="公司名称：" prop="companyName" style="width: calc(50% - 32px)">
                        <el-input
                            type="text"
                            v-model="data.information.companyName"
                            placeholder="请输入公司"
                            clearable
                            @focus="data.onFocusCompanyName"
                            :disabled="data.type === 'edit' ? true : false"
                        />
                    </el-form-item> -->
                    <!-- 超级管理员 可以创建自己企业的子账号和其它公司的管理账户，子账号，编辑时，不能修改则不能修改企业 -->
                    <el-form-item label="公司名称：" prop="companyName" style="width: calc(50% - 32px)">
                        <el-select
                            v-model="data.information.companyName"
                            style="width: 100%"
                            placeholder="请输入公司名称|编号"
                            clearable
                            filterable
                            :disabled="
                                data._userStore.isSuperAdmin
                                    ? props.data.type === 'edit'
                                        ? true
                                        : false
                                    : data.information.isEditAdmin
                                    ? props.data.type === 'edit'
                                        ? true
                                        : false
                                    : true
                            "
                            remote
                            reserve-keyword
                            :remote-method="data.remoteMethod"
                            :loading="data.loading"
                            @change="data.onSelectCompany"
                            @focus="data.onFocusCompanyName"
                        >
                            <el-option
                                v-for="itemOption in data.companyOptions"
                                :key="itemOption.id"
                                :label="itemOption.label"
                                :value="itemOption.value"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="手机号码：" prop="phone" style="width: calc(50% - 32px)">
                        <el-input type="text" v-model="data.information.phone" placeholder="请输入手机号码" clearable />
                    </el-form-item>
                    <el-form-item label="姓名：" prop="name" style="width: calc(50% - 32px)">
                        <el-input v-model="data.information!.name" placeholder="请输入姓名" clearable />
                    </el-form-item>
                    <el-form-item label="登录密码：" prop="password" style="width: calc(50% - 32px)">
                        <el-input
                            v-model="data.information.password"
                            placeholder="请输入登录密码"
                            type="text"
                            clearable
                            @input="data.onPasswordChange"
                            @focus="data.onPasswordFocus"
                        />
                    </el-form-item>
                    <el-form-item
                        label="状态："
                        style="width: calc(50% - 32px)"
                        v-if="Number(data.information.id) !== Number(data.information.companyId)"
                    >
                        <el-switch v-model="data.information.status" />
                    </el-form-item>
                </el-form>
            </div>

            <template v-if="data.information.companyAdminFlag != 1">
                <h1 class="t">
                    <i>*</i> 权限设置
                    <!-- <span class="checked-all"><el-checkbox v-model="data.checkedAllMenu" label="勾选全部" /> </span> -->
                </h1>
                <div class="permission-config">
                    <el-scrollbar height="250px">
                        <el-tree-v2
                            ref="treeRef"
                            node-key="id"
                            :data="data.listTree"
                            show-checkbox
                            :props="data.defaultProps"
                            :expand-on-click-node="true"
                        />
                    </el-scrollbar>
                </div>
            </template>

            <div class="btn">
                <el-button type="primary" @click="onConfirm(ruleFormRef)">确定</el-button>
                <el-button @click="onClose">取消</el-button>
            </div>
        </template>
    </DialogVue>
</template>
<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import DialogVue from '../baseDialog/Index.vue'
import { EditDialogData } from '.'
import { FormInstance, ElTree, ElMessage } from 'element-plus'
import { userStore } from '@/store/user.store'

/**
 *定义formEl
 */
const ruleFormRef = ref<FormInstance>()
/**
 * 初始化tree对象
 */
const treeRef = ref<InstanceType<typeof ElTree>>()
/**
 * 初始化数据
 */
const data = reactive(new EditDialogData())
/**
 * 接收父组件传递的参数
 */
const props = defineProps(['data'])
/**
 * 注册父组件的回调方法
 */
const emits = defineEmits(['hidden'])

//用户仓库
const _userStore = userStore()

/**
 * 由于props中的数据是Readonly，不能直接使用，所以用watchEffect监听props数据变化
 */
watchEffect(() => {
    data.information.title = props.data.type === 'edit' ? '编辑' : '创建'
    data.information.isEditAdmin = props.data.isEditAdmin
    if (!data.information.isEditAdmin) {
        data.information.companyName = _userStore.company
    }

    data.information.companyId = _userStore.companyId
    data.type = props.data.type
    data.information.companyAdminFlag = props.data.config.companyAdminFlag || 0

    //弹窗显示
    if (props.data.visible) {
        data.getMenuTree(data._userStore.isSuperAdmin, data._userStore.userId, treeRef, () => {
            data.getUserOwnMenuTree(treeRef)
        })
        //判断config 值是否为空 且 visible===true
        if (JSON.stringify(props.data.config) !== '{}') {
            data.information.id = props.data.config.id
            // data.information.companyId = props.data.isEditAdmin ? _userStore.companyId : props.data.config.companyId
            data.information.phone = props.data.config.phone
            data.information.name = props.data.config.name
            data.information.password = '••••••'
            data.information.status = props.data.config.status ? true : false

            data.information.companyName = props.data.config.companyName
        }
    }

    console.log('props', props.data)
    // console.log('props.data', props.data)
})

/**
 * 关闭弹窗方法，重置表单，并且传递弹窗隐藏
 */
const onClose = () => {
    if (ruleFormRef.value) {
        ruleFormRef.value.resetFields()
    }
    if (treeRef.value) {
        treeRef.value!.setCheckedKeys([], false)
    }
    emits('hidden', true)
    data.resetData()
}

const onConfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            //返回勾选节点的信息数据
            const result: any[] = treeRef.value?.getCheckedNodes(false, true) as []
            console.log('result', result)
            console.log('data.information.companyName', data.information.companyName)
            if (result.length === 0) {
                ElMessage.error('请勾选用户权限！')
                return
            }
            data.onSubmit(result, () => {
                emits('hidden', true)
                data.resetData()
            })
        } else {
            console.log('error submit！', fields)
        }
    })
}
</script>
<style scoped lang="scss">
.search {
    display: flex;
    align-items: center;
    height: 40px;
    .title {
        width: 80px;
    }
    .search-input {
        width: calc(100% - 80px);
    }
}
.pagination {
    justify-content: start;
}
.table {
    margin: 16px 0;
    height: calc(100% - 40px - 64px);
}
.t {
    line-height: 32px;
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--text-color-primary);
    font-weight: bold;
    i {
        color: var(--el-color-danger);
    }
}
.btn {
    display: flex;
    justify-content: center;
    margin: 32px 0 16px 0;
}
.permission-config {
    max-height: 300px;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 32px;
}
.checked-all {
    margin-left: 16px;
}
</style>
